<template>
    <section class="num-display-1-style">
        <el-form label-position="top" label-width="80px" :model="datas" size="small">
            <el-form-item :label="$t('drag.123456-20')" prop="name">
                <el-button plain @click="handleFeatureSelection">{{ $t('drag.123456-21') }}</el-button>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-22')" prop="name" v-if="datas.setConfig.attributes.length !== 0">
                <el-collapse class="collapse-wrap">
                    <el-collapse-item v-for="item in datas.setConfig.attributes" :key="item.templateId" :title="item.templateName" :name="item.templateId">
                        <el-descriptions direction="vertical" :column="2" :colon="false" :size="`small`">
                            <el-descriptions-item :label="$t('drag.123456-23')">
                                <el-input style="width: 80%" v-model="item.templateName" :placeholder="$t('drag.123456-24')" size="mini"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item :label="$t('drag.123456-43')">
                                <i class="icon" :class="item.icon" @click="handleSelectIcon(item.icon, item.templateId)"></i>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-collapse-item>
                </el-collapse>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-25')" class="left-height">
                <el-slider v-model="datas.setStyle.marginTop" :max="300" :min="-16" input-size="mini" show-input></el-slider>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-26')" class="left-height">
                <el-slider v-model="datas.setStyle.marginBottom" :max="300" :min="-16" input-size="mini" show-input></el-slider>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-16')" class="between">
                <el-color-picker v-model="datas.setStyle.backColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-28')" class="between">
                <el-color-picker v-model="datas.setStyle.nameColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-35')" class="between">
                <el-color-picker v-model="datas.setStyle.numColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-46')" class="between">
                <el-switch v-model="datas.setStyle.showIcon"></el-switch>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-47')" class="between">
                <el-color-picker v-model="datas.setStyle.iconColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-48')" class="between">
                <el-color-picker style="float: right" v-model="datas.setStyle.iconBackColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
        </el-form>
        <feature-selection :data="selectFeature" type="numDisplay1Style"></feature-selection>
        <icon-panel v-if="icon !== ''" :data="selectIcon" :icon="icon" :templateId="templateId"></icon-panel>
    </section>
</template>

<script>
import FeatureSelection from '../../../../components/drag/featureSelection/index.vue';
import IconPanel from '../../../../components/drag/iconPanel/index.vue';

export default {
    name: 'numDisplay1Style',
    components: { FeatureSelection, IconPanel },
    props: {
        datas: Object,
    },
    data() {
        return {
            // 颜色选择器预设
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                '#409EFF',
                '#909399',
                '#C0C4CC',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577',
            ],
            selectFeature: {
                show: false,
            },
            selectIcon: {
                show: false,
            },
            icon: '',
            templateId: null,
        };
    },
    methods: {
        // 属性选择
        handleFeatureSelection() {
            console.log(this.datas);
            this.selectFeature.show = true;
        },
        // 图标选择
        handleSelectIcon(icon, templateId) {
            this.icon = icon;
            this.templateId = templateId;
            this.selectIcon.show = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.num-display-1-style {
    width: 100%;
    padding: 20px 5px;
    box-sizing: border-box;

    .collapse-wrap {
        margin-left: 5px;
        .icon {
            cursor: pointer;
        }

        ::v-deep .el-collapse-item__header {
            height: 42px;
            color: #606266;
        }

        ::v-deep .el-descriptions-item__cell {
            font-size: 13px;
        }
    }

    .between {
        ::v-deep .el-form-item__label {
            text-align: left;
        }
        ::v-deep .el-form-item__content {
            text-align: right;
            float: right;
        }
    }

    .left-height {
        ::v-deep .el-form-item__label {
            text-align: left;
            width: 80px;
            float: left;
            padding: 0;
            line-height: 38px;
        }

        ::v-deep .el-form-item__content {
            margin-left: 80px;
        }
    }
}
</style>
